<template>
  <view class="order-card" @click="$emit('click')">
    <view class="order-header">
      <text class="order-id">订单号: {{order.orderId}}</text>
      <text class="order-status" :class="statusClass">{{statusText}}</text>
    </view>
    
    <view class="order-depot">
      <uni-icons type="shop" size="16" color="#999"></uni-icons>
      <text>{{order.depotName}}</text>
    </view>
    
    <view class="order-content">
      <image :src="order.image" class="order-img"></image>
      <view class="order-info">
        <view class="order-type">{{order.type}}箱型</view>
        <view class="order-time">
          <uni-icons type="calendar" size="14" color="#999"></uni-icons>
          <text>{{order.startTime}} 至 {{order.endTime}}</text>
        </view>
        <view class="order-price">¥{{order.price}}</view>
      </view>
    </view>
    
    <view class="order-footer">
      <text class="order-time">{{order.createTime}}</text>
      <view class="order-actions">
        <view 
          v-for="(action, index) in actions" 
          :key="index"
          class="action-btn"
          :class="action.type"
          @click.stop="handleAction(action.type)"
        >
          {{action.text}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    order: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    statusText() {
      const statusMap = {
        unpaid: '待付款',
        paid: '待使用',
        ongoing: '使用中',
        completed: '已完成',
        canceled: '已取消',
        expired: '已过期'
      }
      return statusMap[this.order.status] || '未知状态'
    },
    statusClass() {
      return this.order.status
    },
    actions() {
      const actionMap = {
        unpaid: [
          { type: 'cancel', text: '取消订单' },
          { type: 'pay', text: '立即支付' }
        ],
        paid: [
          { type: 'refund', text: '申请退款' },
          { type: 'use', text: '使用订单' }
        ],
        ongoing: [
          { type: 'extend', text: '延长时间' },
          { type: 'end', text: '结束使用' }
        ],
        completed: [
          { type: 'review', text: '去评价' },
          { type: 'again', text: '再次预订' }
        ],
        canceled: [
          { type: 'delete', text: '删除订单' },
          { type: 'again', text: '再次预订' }
        ],
        expired: [
          { type: 'delete', text: '删除订单' },
          { type: 'again', text: '再次预订' }
        ]
      }
      
      return actionMap[this.order.status] || []
    }
  },
  methods: {
    handleAction(type) {
      this.$emit('action', { type, order: this.order })
    }
  }
}
</script>

<style lang="scss">
$primary-color: #FF7F00;

.order-card {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 10px;
    
    .order-id {
      font-size: 13px;
      color: #999;
    }
    
    .order-status {
      font-size: 13px;
      font-weight: bold;
      
      &.unpaid {
        color: #FF5722;
      }
      
      &.paid {
        color: #4CAF50;
      }
      
      &.ongoing {
        color: #2196F3;
      }
      
      &.completed {
        color: #9E9E9E;
      }
      
      &.canceled, &.expired {
        color: #F44336;
      }
    }
  }
  
  .order-depot {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    
    text {
      margin-left: 5px;
    }
  }
  
  .order-content {
    display: flex;
    margin-bottom: 15px;
    
    .order-img {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      margin-right: 12px;
    }
    
    .order-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .order-type {
      font-size: 15px;
      font-weight: bold;
      color: #333;
    }
    
    .order-time {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #999;
      
      text {
        margin-left: 5px;
      }
    }
    
    .order-price {
      font-size: 18px;
      font-weight: bold;
      color: $primary-color;
      text-align: right;
    }
  }
  
  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
    
    .order-time {
      font-size: 12px;
      color: #999;
    }
    
    .order-actions {
      display: flex;
      
      .action-btn {
        height: 30px;
        padding: 0 12px;
        border: 1px solid #ddd;
        border-radius: 15px;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        
        &.pay {
          border-color: $primary-color;
          color: $primary-color;
        }
        
        &.use, &.review, &.again {
          background: $primary-color;
          color: #fff;
          border: none;
        }
      }
    }
  }
}
</style>